<template><div><h2 id="网页可不可以嵌入其他网站的内容-嵌入的js会影响本网页吗" tabindex="-1"><a class="header-anchor" href="#网页可不可以嵌入其他网站的内容-嵌入的js会影响本网页吗"><span>网页可不可以嵌入其他网站的内容，嵌入的js会影响本网页吗？</span></a></h2>
<p>可以（通过iframe标签引入成功），但是嵌入的js不会影响本网页。</p>
<VPDemoNormal :config="DemoContainer6"><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>主页面&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">h1</span><span style="color:#ABB2BF">>主页面&#x3C;/</span><span style="color:#E06C75">h1</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">iframe</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"http://segmentfault.com"</span><span style="color:#D19A66"> frameborder</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"0"</span><span style="color:#ABB2BF">>&#x3C;/</span><span style="color:#E06C75">iframe</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></VPDemoNormal><h2 id="localhost真的可以请求后台的接口吗" tabindex="-1"><a class="header-anchor" href="#localhost真的可以请求后台的接口吗"><span>localhost真的可以请求后台的接口吗</span></a></h2>
<p>不行，因为当前后端分离时，前端服务器和后端服务器必然不能同时占用一个端口号，端口号不同就会存在跨域问题，服务端必须允许跨域请求，浏览器会先发送一个跨域请求，来判断是否允许跨域。</p>
<h2 id="跨域的域指的是什么" tabindex="-1"><a class="header-anchor" href="#跨域的域指的是什么"><span>跨域的域指的是什么？</span></a></h2>
<p>域名，协议，端口</p>
<div class="language-shell line-numbers-mode" data-highlighter="shiki" data-ext="shell" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#61AFEF">www.</span><span style="color:#98C379">   zhihu.</span><span style="color:#98C379">  com</span><span style="color:#98C379">     .</span></span>
<span class="line"><span style="color:#61AFEF">三级域</span><span style="color:#98C379"> 二级域</span><span style="color:#98C379"> 顶级域</span><span style="color:#98C379"> 根域</span></span>
<span class="line"></span>
<span class="line"><span style="color:#61AFEF">www.</span><span style="color:#98C379">   zhihu.</span><span style="color:#98C379"> com.</span><span style="color:#98C379">   cn</span><span style="color:#98C379">      .</span></span>
<span class="line"><span style="color:#61AFEF">四级域</span><span style="color:#98C379"> 三级域</span><span style="color:#98C379"> 二级域</span><span style="color:#98C379"> 顶级域</span><span style="color:#98C379"> 根域</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>跨域的级别越高受的限制越大</p>
<h2 id="跨域禁止了什么操作" tabindex="-1"><a class="header-anchor" href="#跨域禁止了什么操作"><span>跨域禁止了什么操作</span></a></h2>
<ol>
<li>读写对方的资源（包括dom，localstorge，cookie）</li>
<li>发送ajax</li>
<li>一系列所有可以操控宿主机的权限。</li>
</ol>
<h2 id="jsonp是什么" tabindex="-1"><a class="header-anchor" href="#jsonp是什么"><span>jsonp是什么</span></a></h2>
<p>一种漏洞，html标签中凡是存在src这个属性的都可以实现跨域，把本地回调函数名发送给远程服务器，远程服务器通过拼接回调函数名，把js文件以json的格式发送过来，本地浏览器再去执行发送回来的js代码。<br>
这些带&quot;src&quot;属性的标签每次加载时，实际上是由浏览器发起了一次GET请求。<br>
不同于XMLHttpRequest的是，通过src属性加载的资源，浏览器限制了JavaScript的权限，使其不能读写返回的内容。</p>
<blockquote>
<p>参考：<br>
https://blog.csdn.net/guorui_java/article/details/107345499<br>
https://blog.csdn.net/M_emory_/article/details/131504133</p>
</blockquote>
<div class="hint-container tip">
<p class="hint-container-title">理解</p>
<p>如果不能允许跨域的话，就可以使用这种办法，来传给服务端内容</p>
</div>
<h2 id="浏览器跨域的判定流程" tabindex="-1"><a class="header-anchor" href="#浏览器跨域的判定流程"><span>浏览器跨域的判定流程</span></a></h2>
<ol>
<li>
<p>先对前端页面和后端交互地址做匹配，若同源直接发送数据，如不同源，则发送跨域请求</p>
</li>
<li>
<p>服务器解析程序收到浏览器跨域请求后，根据自身配置返回对应文件头。若未配置过任何允许跨域，则文件头里不包含Access-Control-Allow-origin字段，若配置过域名，则返回Access-Control-Allow-origin+ 对应配置规则里的域名的方式。</p>
</li>
<li>
<p>浏览器根据接受到的http文件头里的Access-Control-Allow-origin字段做匹配，若无该字段，说明不允许跨域；若有该字段，则对字段内容和当前域名做比对，如果同源，则说明可以跨域，浏览器发送该请求；若不同源，则说明该域名不可跨域，不发送请求</p>
</li>
</ol>
<h2 id="dns劫持" tabindex="-1"><a class="header-anchor" href="#dns劫持"><span>DNS劫持</span></a></h2>
<p>例子：一些政府网站点进去会跳到其他网站，原理就是通过域名抢注的方式，将原本网页引入的js脚本，替换成自己的js脚本，将网页进行重定向，跳转到其他网页。</p>
<h2 id="实验" tabindex="-1"><a class="header-anchor" href="#实验"><span>实验</span></a></h2>
<p>编写一个网页，访问后端任意接口，用nginx部署，同时用本机的ip打开该网页，验证能否在不同浏览器能否通过ip访问后端接口</p>
<h3 id="接口" tabindex="-1"><a class="header-anchor" href="#接口"><span>接口</span></a></h3>
<div class="language-java line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="java" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#C678DD">package</span><span style="color:#C678DD"> xyz.hmz.backend.controller</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.GetMapping</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.RestController</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic">/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Author haomingze</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Date 2025/3/14 15:56</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @description:</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> */</span></span>
<span class="line"><span style="color:#ABB2BF">@</span><span style="color:#E5C07B">RestController</span></span>
<span class="line"><span style="color:#C678DD">public</span><span style="color:#C678DD"> class</span><span style="color:#E5C07B"> TestController</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">    @</span><span style="color:#E5C07B">GetMapping</span><span style="color:#E06C75">(</span><span style="color:#98C379">"/test"</span><span style="color:#E06C75">)</span></span>
<span class="line"><span style="color:#C678DD">    public</span><span style="color:#E5C07B"> String</span><span style="color:#61AFEF"> test</span><span style="color:#ABB2BF">(){</span></span>
<span class="line"><span style="color:#E5C07B">        System</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">err</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">println</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"test接口调用成功"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">        return</span><span style="color:#98C379"> "test接口调用成功"</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><div class="language-vue line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="vue" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">script</span><span style="color:#D19A66"> setup</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#C678DD">const</span><span style="color:#E5C07B"> xhr</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> XMLHttpRequest</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#E5C07B">xhr</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">open</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'GET'</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">'http://10.58.100.177:8888/test'</span><span style="color:#ABB2BF">, </span><span style="color:#D19A66">true</span><span style="color:#ABB2BF">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic">// 监听请求状态变化</span></span>
<span class="line"><span style="color:#E5C07B">xhr</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">onreadystatechange</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> function</span><span style="color:#ABB2BF"> () {</span></span>
<span class="line"><span style="color:#C678DD">  if</span><span style="color:#ABB2BF"> (</span><span style="color:#E5C07B">xhr</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">readyState</span><span style="color:#56B6C2"> ===</span><span style="color:#D19A66"> 4</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#C678DD">    if</span><span style="color:#ABB2BF"> (</span><span style="color:#E5C07B">xhr</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">status</span><span style="color:#56B6C2"> ===</span><span style="color:#D19A66"> 200</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">      // 请求成功，处理响应数据</span></span>
<span class="line"><span style="color:#E5C07B">      console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'请求成功:'</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">xhr</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">responseText</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">    } </span><span style="color:#C678DD">else</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">      // 请求失败，处理错误</span></span>
<span class="line"><span style="color:#E5C07B">      console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">error</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'请求失败:'</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">xhr</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">statusText</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"><span style="color:#ABB2BF">  }</span></span>
<span class="line"><span style="color:#ABB2BF">};</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E5C07B">xhr</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">send</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">template</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">template</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">style</span><span style="color:#D19A66"> scoped</span><span style="color:#ABB2BF">>&#x3C;/</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><p>经过实验发现,在edge，chrome下,使用ip可以访问到后端的接口</p>
<blockquote>
<p>参考：<br>
https://cloud.tencent.com/developer/article/1953193
https://blog.csdn.net/qq_42893625/article/details/105003755
https://zhuanlan.zhihu.com/p/340684828</p>
</blockquote>
</div></template>


<script setup>
import DemoContainer6 from 'C:/core-data/develop/code/custom/hmz-blog/docs/.vuepress/.temp/md-power/demo/normal/notes-每周一学-2.第二周学习-2.浏览器的安全机制-DemoContainer6.js';
</script>